<template>
  <div id="specSamplingHistory">
    <!-- <Breadcrumb :content="$store.state.curMenu.leftMenuName" v-if="!isChildren" /> -->
    <div>
      <vxe-toolbar perfect>
        <template #buttons>
          <span class="margin-lr-xs">病人ID:</span>
          <vxe-input v-model="form.patId" clearable @clear="findSpecSamplingHistoryList()" @keyup.enter.native="findSpecSamplingHistoryList" style="width: 100px"></vxe-input>
          <span class="margin-lr-xs">条码号:</span>
          <vxe-input v-model="form.reqNo" clearable @clear="findSpecSamplingHistoryList()" @keyup.enter.native="findSpecSamplingHistoryList" style="width: 110px"></vxe-input>
          <span class="margin-lr-xs">姓名:</span>
          <vxe-input v-model="form.patNa" clearable @clear="findSpecSamplingHistoryList()" @keyup.enter.native="findSpecSamplingHistoryList" style="width: 80px"></vxe-input>
          <span class="margin-lr-xs">采集时间:</span>
          <vxe-input v-model="form.samplingTimeS" type="datetime" clearable @clear="findSpecSamplingHistoryList()" @keyup.enter.native="findSpecSamplingHistoryList" style="width: 160px"></vxe-input>
          <span class="margin-lr-xs">-</span>
          <vxe-input v-model="form.samplingTimeE" type="datetime" clearable @clear="findSpecSamplingHistoryList()" @keyup.enter.native="findSpecSamplingHistoryList" style="width: 160px"></vxe-input>
          <vxe-button icon="vxe-icon-search" class-name="text-black text-bold" content="查询" @click="findSpecSamplingHistoryList"></vxe-button>
        </template>
      </vxe-toolbar>
    </div>

    <div class="specSamplingHistoryTable" :style="{ height: 'calc(100% - 40px - 80px)' }">
      <vxe-table ref="specSamplingHistoryTable" v-loading="loading" border height="auto" :data="specSamplingHistoryList" @cell-click="specSamplingHistoryRowClick" :row-config="{ isCurrent: true, isHover: true }" :keyboard-config="{ isArrow: true, isTab: true, isEdit: true }" resizable show-overflow>
        <vxe-column type="seq" width="26"></vxe-column>
        <vxe-column field="sampleTypeNa" title="类型" width="60"></vxe-column>
        <vxe-column field="reqNo" title="条码号" width="100px">
          <template #default="{ row }">
            <span>{{ row.reqNo ? row.reqNo : '' }}</span>
          </template>
        </vxe-column>
        <vxe-column field="hisReqId" title="申请号" width="80"></vxe-column>
        <vxe-column field="isSign" title="签收状态" width="60" align="center">
          <template #default="{ row }">
            <span :class="row.isSign ? 'text-blue' : 'text-red'">
              {{ row.isSign === '1' ? '已签收' : '未签收' }}
            </span>
          </template>
        </vxe-column>

        <!-- <vxe-column field="date" title="传送方式" width="100"></vxe-column> -->
        <vxe-column field="patId" title="病人ID" width="100"></vxe-column>
        <vxe-column field="patNa" title="姓名" width="80"></vxe-column>
        <vxe-column field="sex" title="性别" width="60">
          <template #default="{ row }">
            <span> {{ row.sex === '1' ? '男' : row.sex === '2' ? '女' : '未知' }}</span>
            <span></span>
          </template>
        </vxe-column>
        <vxe-column field="age" title="年龄" width="80"></vxe-column>
        <vxe-column field="sampleTypeNa" title="样本类型" width="80"></vxe-column>
        <vxe-column field="feeName" title="项目" width="180"></vxe-column>
        <vxe-column field="reqDoctorNa" title="申请人" width="80">
          <template #default="{ row }">
            <span>{{ row.reqDoctorNa ? row.reqDoctorNa : '' }}</span>
          </template>
        </vxe-column>
        <vxe-column field="applicationTime" title="申请时间" width="120">
          <template #default="{ row }">
            <span>{{ row.reqTime ? row.reqTime : '' }}</span>
          </template>
        </vxe-column>
        <vxe-column field="samplingDoctorNa" title="采集人" width="80">
          <template #default="{ row }">
            <span>{{ row.samplingDoctorNa ? row.samplingDoctorNa : '' }}</span>
          </template>
        </vxe-column>
        <vxe-column field="samplingTime" title="采集时间" min-width="120">
          <template #default="{ row }">
            <span>{{ row.samplingTime ? row.samplingTime : '' }}</span>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <vxe-pager align="left" min-height="32px" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult" :layouts="[
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'Sizes',
            'FullJump',
            'Total'
          ]" @page-change="handleSizeChange($event)"></vxe-pager>
  </div>
</template>
<script lang="ts" setup>
import { Component, Vue, Prop, ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { IsEmpty, formatDateTime } from '@/utils/common';

let { proxy }: any = getCurrentInstance();
let pageIndex = 1;
let totalCount = 0;
let loading = ref(false);
let specSamplingHistoryList = reactive([]); //列表
let currentSpecSamplingHistory = {} as any; //当前选中行
let currentRowIndex = 0;
let form = {
  searchValue: '',
  patId: '',
  reqNo: '',
  patNa: '',
  samplingTimeS: formatDateTime(new Date(), 'yyyy-MM-dd 00:00:00'),
  samplingTimeE: formatDateTime(new Date(), 'yyyy-MM-dd 23:59:59')
};

onMounted(() => {
  findSpecSamplingHistoryList();
});

//获取列表
function findSpecSamplingHistoryList() {
  loading.value = true;
  const url = '/lab/reqMain/findLabReqMainPageListByState';
  const data = {
    filter: IsEmpty(form.searchValue) ? '' : form.searchValue.trim(),
    state: '40',
    pageIndex: page.currentPage,
    pageSize: page.pageSize,
    patId: !IsEmpty(form.patId) ? form.patId : null,
    reqNo: !IsEmpty(form.reqNo) ? form.reqNo : null,
    patNa: !IsEmpty(form.patNa) ? form.patNa : null,
    samplingTimeS: !IsEmpty(form.samplingTimeS) ? form.samplingTimeS : null,
    samplingTimeE: !IsEmpty(form.samplingTimeE) ? form.samplingTimeE : null
  };

  proxy.$http
    .get(url, { params: data })
    .then((res: any) => {
      specSamplingHistoryList.push(...res.data.records);
      page.totalResult = res.data.total;
      loading.value = false;
    })
    .catch((err: any) => {
      loading.value = false;
      proxy.$alert(err, '提示');
    });
}

// 条数/页
const PageSizeList = [10, 50, 100, 200, 500];
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[1],
  totalResult: 0
});
//查询
function handleSearch() {
  findSpecSamplingHistoryList();
}

// 行点击事件
function specSamplingHistoryRowClick({ row, rowIndex }) {
  if (IsEmpty(row)) {
    currentSpecSamplingHistory = {} as any;
    return;
  }
  currentRowIndex = rowIndex;
  currentSpecSamplingHistory = row;
  (proxy.$refs.specSamplingHistoryTable as any).setCurrentRow(row);
}



//点击每页数量
//点击每页数量
function handleSizeChange({ type, currentPage, pageSize }) {
  if (type === 'size') {
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  page.pageSize = pageSize;
  findSpecSamplingHistoryList();
}

</script>
<style lang="scss" scoped>
@import '@/assets/css/isd-body.scss';

#specSamplingHistory {
  height: 100%;

  .specSamplingHistoryTable {
    height: calc(100vh - 160px);
  }
}
</style>
